<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>流程设计</title>
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="../../assets/css/elementui.css">
    <link rel="stylesheet" type="text/css" href="/assets/libs/kindeditor/themes/default/default.css"/>

    <style>
        .el-card {
            margin-top: 4px
        }

        .el-dialog {
            margin-top: 1vh !important;
        }
    </style>
</head>
<body>
<!-- 正文开始 -->
<div id="app">
    <div>
        <el-card>
            <el-form :inline="true" :model="searchForm">
                <el-form-item label="公告标题">
                    <el-input v-model="searchForm.title"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="search" type="primary">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card>
            <el-row>
                <el-button @click="addFlowApprove">新增</el-button>
            </el-row>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="编号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="流程标题"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="流程类型"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="是否可用"
                        width="180">
                    <template slot-scope="scope">
                        {{ scope.row.status=='1'?'是':'否' }}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="crtTime"
                        label="创建时间"
                        width="180">
                </el-table-column>

                <el-table-column
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button @click="handleDelete(scope.row.id)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="page.currentPage"
                    :page-size="page.rows"
                    layout="total, sizes, prev, pager, next"
                    :page-sizes="[10, 20, 50]"
                    :total="page.total">
            </el-pagination>
        </el-card>

        <el-dialog
                title="信息"
                :visible.sync="dialogVisible"
                width="60%">
            <el-form>
                <el-form-item label="流程标题">
                    <el-input v-model="submitForm.title"></el-input>

                </el-form-item>
                <el-form-item label="流程类型">
                    <el-input v-model="submitForm.type"></el-input>

                </el-form-item>
                <el-form-item label="流程状态">
                    <el-input v-model="submitForm.status"></el-input>

                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
            <el-button type="primary" @click="handleSave" size="mini">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</div>
<script type="text/javascript" src="../../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../../assets/js/common.js?v=317"></script>
<script type="text/javascript" src="../../../assets/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../../../assets/js/js.cookie.min.js"></script>
<script type="text/javascript" src="../../../assets/js/sqjx.js"></script>
<script type="text/javascript" src="../../../assets/js/custom.js"></script>
<script src="../../../assets/js/vue.min.js"></script>
<script src="../../../assets/js/elementui.js"></script>
<script>
    let that;
    new Vue({
        el: '#app',
        data: function () {
            return {
                title: '流程步骤',
                dialogVisible: false,
                submitForm: {
                    id:'',
                    title: "",
                    type: '',
                    status: ''
                },
                searchForm: {
                    title: ''
                },
                page: {
                    total: 0,
                    currentPage: 1,
                    rows: 10,
                },
                stepList: [],
                tableData: []
            }
        },
        mounted: function () {
            that = this
            this.search();
        },
        methods: {
            addFlowApprove() {
                this.dialogVisible = true
            },
            search: function () {
                var params = this.searchForm;
                params.page = this.page.currentPage;
                params.rows = this.page.rows;
                $.get('/office/flowWorkTemplate/queryFlowWorkTemplateList', params, function (res) {
                    that.tableData = res.obj.rows
                    that.page.total = res.obj.total
                })
            },
            handleEdit(row) {
                let editRow=JSON.parse(JSON.stringify(row))
                editRow.nodes=row.nodes?JSON.parse(row.nodes):{}
                editRow.lines=row.lines?JSON.parse(row.lines):{}
                editRow.areas=row.areas?JSON.parse(row.areas):{}
                var urlParam = encodeURI(JSON.stringify(editRow))
                parent.layer.open({
                    title: '流程设计',
                    content: '/assets/libs/GooFlow/GooFlow/demo2.html?json=' + urlParam,
                    area: ['100%', '100%'],
                    type: 2
                })
            },
            handleDelete(id) {
                layer.confirm('确认删除？', function () {
                    showAlert('暂不支持');
                    return
                    $.post('/office/flowWorkTemplate/updateFlowWorkTemplateList', {id:that.submitForm.id,status:'0'}, function (res) {
                        that.dialogVisible = false
                        that.search()
                        showAlert(res.msg, 1)
                    })
                })
            },
            handleSizeChange() {
            },
            handleCurrentChange(currentPage) {
                that.page.currentPage = currentPage;
                that.search()
            },
            handleSave() {
                $.post('/office/flowWorkTemplate/addFlowWorkTemplate',this.submitForm,function () {
                    that.search()
                    that.dialogVisible = false
                })
            }
        },
    })
</script>
</body>
</html>
